// import { useState } from 'react';
import Styles from './index.module.css';
import { Button, Form, Input, Select } from 'antd';
import { useNavigate } from 'react-router'
import { useSelector, useDispatch } from 'react-redux';
import {setUserName} from '@/store/userSlice'
const { Option } = Select;

export default function Login() {

  const navigate = useNavigate();
  // 全局状态 当前用户信息
  const userInfo = useSelector((state:any) => state.users);
  const dispatch = useDispatch();
  console.log('userInfo',userInfo);
  

  /** 1代表密码登陆； 2代表短信验证码登陆 0 代表手机app扫描登陆 */
  // const [loginType, setLoginType] = useState<number>(1);
  // const [loginType1, setLoginType1] = useState<number>(1);

  const onFinish = () => {

  }

  const onFinishFailed = () => {

  }

  const selectBefore = (
    <Select defaultValue="+86">
      <Option value="+86">中国大陆  +86</Option>
      <Option value="https://">https://</Option>
    </Select>
  )

  return (
    <div className={Styles.loginContainer}>
      <div className={Styles.container}>
        <div className={Styles.blank}>
          空白区域
        </div>
        <div className={Styles.right}>
          <div>欢迎登陆</div>
          <div className={Styles.main}>
            <div className={Styles.tabTitle}>
              <span>密码登陆</span>
              <span>短信登陆</span>
            </div>

            <Form
              name="basic"
              labelCol={{ span: 8 }}
              wrapperCol={{ span: 16 }}
              style={{ width: '100%' }}
              initialValues={{ remember: true }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
            >
              <Form.Item
                label=""
                name="usercount"
                rules={[{ required: true, message: 'Please input your usercount!' }]}
              >
                <Input size='large' placeholder='帐户名/邮箱/手机号' />
              </Form.Item>

              <Form.Item
                label=""
                name="password"
                rules={[{ required: true, message: 'Please input your password!' }]}
              >
                <Input size='large' placeholder='清输入登录密码' />
              </Form.Item>

              <Form.Item
                label=""
                name="telphone"
                rules={[{ required: true, message: 'Please input your telphone!' }]}
              >
                <Input size='large' addonBefore={selectBefore} placeholder='请输入手机号' />
              </Form.Item>

              <Form.Item
                label=""
                name="code"
                rules={[{ required: true, message: 'Please input your code!' }]}
              >
                <Input size='large' placeholder='请输入验证码' suffix="获取验证码" />
              </Form.Item>

              <Form.Item>
                <Button onClick={() => {
                  dispatch(setUserName('ella'))
                  navigate('/dashboard')
                }}>登录</Button>
              </Form.Item>
            </Form>

          </div>
        </div>
      </div>
    </div>
  )
}